
  nutShell.viewport = {};  

  /* 
   *
   *  ---- Module -----
   *
   */

  nutShell.viewport = function(options){
    this.Version = '0.1.1';
    
    if (options.popped){
      this.templateName = 'floating';
    }else{
      this.templateName = 'normal';
    }
    
    this.title = options.title;
    this.html = options.html;
        
    var windowTpl = new nutShell.template(
                                            '<div class="ns-window-{style_name}-holder">',
                                              '<div class="ns-window-{style_name}-titlebar">',
                                                '<h2 class="ns-window-{style_name}-title">{window_title}</h2>',
                                              '</div>',
                                              '<div class="ns-window-{style_name}-dataHolder">{window_data}</div>',
                                            '</div>'
                                          );
                  
    windowTpl.setVarData('style_name', this.templateName);
    windowTpl.setVarData('window_title', this.title);
    windowTpl.setVarData('window_data', this.html);
    
    var bodyEL = $$('body')[0];
    
    //alert();
    
    this.vp = new Element('div', { 'class': 'ns-window-'+this.templateName+'-frame', style: 'position: absolute; z-index: 100000', top: '0', left: '0'}).update(windowTpl);
    this.vpC = new Element('div', { 'class': 'ns-window-'+this.templateName+'-cover', style: 'position: absolute; z-index: 99999', top: '0', left: '0', width: '100%', height: bodyEL.getHeight() + 'px'}).update();
    this.vp.setOpacity(0);
    this.vpC.setOpacity(0);

    bodyEL.appendChild(this.vpC);
    bodyEL.appendChild(this.vp);
    
    var d1 = document.viewport.getDimensions();
    var d2 = Element.getDimensions(this.vp);
    this.vp.style.top = (d1.height / 2 - d2.height / 2) + 'px';
    this.vp.style.left = (d1.width / 2 - d2.width / 2) + 'px';

    new Draggable(this.vp, {
                              scroll: window,
                              handle: 'ns-window-'+this.templateName+'-titlebar'
                            });
    
    new Effect.Opacity(this.vpC, {from:0, to:1.0, duration:.25});
    new Effect.Opacity(this.vp, {from:0, to:1.0, duration:.25, queue: 'end'});
    
    _self = this;
    
    this.close = function(e){
      new Effect.Opacity(_self.vp, {from:1.0, to:0, duration:.5, afterFinish: function(){_self.vp.remove();}});
      new Effect.Opacity(_self.vpC, {from:1.0, to:0, duration:.5, afterFinish: function(){_self.vpC.remove();}});
    }
        
    this.vpC.observe('click', this.close);
    
    
    this.resize = function(){
      _self.vpC.style.height = (bodyEL.getHeight() + 20) + 'px';
      setTimeout(_self.resize, 100);
    }
    
    setTimeout(_self.resize, 100);
    
  }